本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～
現在的網頁越來越複雜，相信大家不會想自己手動做出一些別人已經做過的東西，想嘗試套用別人寫好的套件來加速自己的開發，今天這篇文章就是要教大家如何去使用別人寫好的套件，並且安裝到自己的專案底下。
在正式開始介紹如何安裝與管理專案套件時，先來介紹 Node.js ，看完連結的介紹你可能會覺得 Node.js 是給後端在用的，前端怎麼也需要用了呢？
其實前端要用的不是 Node.js 而是他附贈用來管理套件的軟體，會在底下詳細介紹，所以大家不妨先到 Node.js 的官網去下載 Node.js 之後再開始往下繼續看文章的相關介紹吧！
npm全名為 Node Package Manager 是 Node.js 用來管理套件的系統，在前端還沒有那麼複雜之前其實是不需要 npm 來安裝套件的，如今網頁越來越複雜，為了要讓工程師可以加速開發所以就有很多大大開發一些套件讓大家使用，像之前筆者介紹的 axios 就是一種負責前後端溝通的好用套件，而 npm 自己有一個網站裡面擺放了非常多的套件提供給大家使用。
只要在終端機下 npm install <package> 即可安裝套件。
只要在終端機下 npm remove <package> 即可移除套件。
node_modules 是負責用來存放經由 npm 安裝過後的套件，只要沒有套件沒有移除就會一直被擺在 node_modules 裡面，所以沒用到的套件要記得移除不要喔！而這也是為什麼網頁的專案會比較一般的專案來的肥大一點的原因，就是因為 node_modules 佔了太大的空間。
前面講了非常多的套件安裝方法，接下來要來講如何管理套件了，其實套件是藉由 package.json 這個檔案來進行管理的，而 package.json 用來管理套件的 key 可分為 dependencies 以及 devDependencies 。
要產生 package.json 也非常簡單，只要下 npm init 這個指令之後再一直按enter就可以了。
不過像筆者這種人真的是很懶不想要一直按enter XD，所以這邊筆者介紹另一種快速初始化 package.json 的指令，只要下 npm init -y 就可以了。
用來管理一般的套件，只要是網頁本體所需要用到的套件都會擺在 dependencies 內。
在終端機下 npm install <package> 就會將套件名稱擺放在 dependencies 。
移除套件只要在終端機下 npm remove <package> 就可以把套件從 dependencies 中移除。
用來管理開發環境所需套件，像是常見的 webpack 、 babel 等等，這邊筆者在後面的文章會詳細說明，這邊稍微有個概念就好。
在終端機下 npm install <package> -D 就會將套件名稱擺放在 devDependencies 。
移除套件只要在終端機下 npm remove <package> -D 就可以把套件從 devDependencies 中移除。
最後我們看一下 package.json 就可以看到剛剛筆者上面安裝的兩個套件分別會擺在 dependencies 以及 devDependencies 了。
而移除套件過後的 package.json 會長的像這樣。
最後來講一下如何重新安裝全部套件，假如今天不小心把專案的 node_modules 砍掉了，這時候只要下 npm install 就可以把套件全部安裝回來。
大家在安裝套件後不曉得有沒有發現專案內突然生出了一個叫 package-lock.json 的檔案，看到lock應該就可以猜到是負責鎖住某個東西，其實 package-lock.json 就是負責鎖住套件的版本號，至所以要有這個 lock 檔的原因就是為了讓 npm install 的過程中不會自動去更新套件版本導致專案發生錯誤的窘境，所以這個 lock 檔是十分重要的檔案千萬不要隨便刪除喔！
今天介紹了套件管理系統以方便工程師可以利用別人寫好的套件加快自己的開發，在明天的文章會介紹如何在自己的程式碼中引用已經安裝好的套件，這種安裝套件的模式稱為 模組化 ，而模組化可以說是現在網頁非常重要的概念，尤其現在的網頁越來越複雜，如果可以善用模組化的話就可以更省力的開發網頁，讀者們如果網頁觀念學得差不多了不妨可以思考一下如何善用模組化功能讓網頁未來可以更方便的維護喔！
iThome鐵人賽
看影片追技術